<template>
  <div id="main">
    <h3 id="running">
      当前正在进行的培训数：<em style="color: red">{{ running }}</em>
    </h3>
    <div id="progress">
      <h3>完成进度：</h3>
      <el-progress
        :text-inside="true"
        style="left: 100px; top: -40px; width: 150px"
        :stroke-width="25"
        :percentage="finrote"
        status="success"
      ></el-progress>
    </div>

    <div id="bar">
      <el-input
        placeholder="请输入培训主题"
        prefix-icon="el-icon-search"
        v-model="searchtext"
        style="width: 300px"
      >
      </el-input>
      <el-button   size="medium" @click="search"
      style="margin-left:20px"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-circle-plus"
        size="medium"
       
        @click="toAdd"
        >新增</el-button
      >
            <el-button
        type="success"
        icon="el-icon-edit"
        size="medium"
      
        @click="toModify()"
        >编辑</el-button
      > 
      <el-button
        type="danger"
        icon="el-icon-delete-solid"
        size="medium"
        @click="deletePlan"
        
        >删除</el-button
      >

    </div>
    <div id="data">
      <el-table
        :data="trainList"
        height="500"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" label="选择" width="55">
        </el-table-column>
        <el-table-column type="expand" width="55">
          <template slot-scope="props">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
              style="padding-left: 200px"
            >
              <el-form-item label="员工工号">
                <span>{{ props.row.userId }}</span>
              </el-form-item>
              <el-form-item label="员工姓名">
                <span>{{ props.row.userName }}</span>
              </el-form-item>
              <el-form-item label="计划主题">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="计划内容">
                <span>{{ props.row.content }}</span>
              </el-form-item>
              <el-form-item label="开始时间">
                <span>{{ props.row.startDate }}</span>
              </el-form-item>
              <el-form-item label="结束时间">
                <span>{{ props.row.endDate }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span>{{ props.row.status }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>

        <el-table-column label="员工姓名" prop="userName"> </el-table-column>
        <el-table-column label="计划主题" prop="name"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="success" effect="dark" v-show="scope.row.status == 0">
              进行中
            </el-tag>
            <el-tag type="danger" effect="dark" v-show="scope.row.status == 1">
              已完成
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      </el-table>
      <div>
        <el-pagination
          alian="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="trainList.length"
          style="position: absolute; right: 0"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/train";
export default {
  name: "Train",
  data() {
    return {
      trainList: [],
      searchtext: "",
      multipleSelection: [],
      currentPage: 1,
      //一页几条数据
      pageSize: 20,
      running: 0,
      finished: 0,
      finrote: 0,
    };
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    //查找
    search() {
      if (this.searchtext == "") {
        this.$message.error("请输入培训主题");
        return;
      }
      let list = [];
      for (let index = 0; index < this.trainList.length; index++) {
        if (this.trainList[index].name == this.searchtext) {
          console.log(this.trainList[index]);
          list.push(this.trainList[index]);
        }
      }
      this.trainList = list;
    },
    //获取数据
    getListt() {
      api
        .getPlan()
        .then((response) => {
          this.trainList = response.list;
          for (let index = 0; index < this.trainList.length; index++) {
            if (this.trainList[index].status == 0) {
              this.running++;
            }
            this.initBasicmsg();
          }
        })
        .catch((err) => {
          console.log(err);
        });
      // this.trainList=list.page.list
      // this.trainList=plan.page.list
    },
    //选中行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除
    deletePlan() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "至少选择一条记录",
          type: "warning",
        });
        return;
      }
      let list = this.trainList;
      let ids = [];
      for (let index = 0; index < this.multipleSelection.length; index++) {
        for (let index2 = 0; index2 < this.trainList.length; index2++) {
          if (this.multipleSelection[index].id == this.trainList[index2].id) {
            this.trainList.splice(index2, 1);
            ids.push(this.multipleSelection[index].id);
            if (this.multipleSelection[index].status == 0) this.running--;
            this.initBasicmsg();
          }
        }
      }
      api.deletePlan(this.multipleSelection[0].id);
      this.$message({
        message: "已成功删除" + this.multipleSelection.length + "条数据",
        type: "success",
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    initBasicmsg() {
      this.finished = 0;
      TouchList;
      for (let index = 0; index < this.trainList.length; index++) {
        if (this.trainList[index].status == 1) {
          this.finished++;
        }
      }
      this.finrote = Math.floor(100 * (this.finished / this.trainList.length));
      if (isNaN(this.finrote)) this.finrote = 0;
    },
    toAdd() {
      this.$router.push({ path: "/employee/addTrain" });
    },
    toModify() {
      if (this.multipleSelection.length != 1) {
        this.$message.error("一次只能编辑一条培训记录");
        return;
      }
      this.$router.push({
        path: "/employee/modifyTrain",
        query: { data: this.multipleSelection },
      });
    },
  },
  created() {
    this.getListt();
    this.initBasicmsg();
  },
};
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
#main {
  position: absolute;
  top: 250px;
  width: 100%;
  height: 100%;
}
#bar {
  position: absolute;
  left: 100px;
  top: -50px;
  padding-left: 400px;
}
#running {
  position: absolute;
  left: 200px;
  top: 20px;
}
#progress {
  position: absolute;
  top: 20px;
  left: 55%;
  width: 40%;
}
#data {
  width: 100%;
  position: absolute;
  top: 120px;
}
</style>